<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../ux/jquery.ux.js" type="text/javascript"></script>
<link href="../../ux.button/jquery.ux.button.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../ux.button/jquery.ux.button.js" type="text/javascript"></script>
<title>jquery.ux.button</title>
</head><body>

<a href="./">&laquo; Index</a>

<style type="text/css">

.ux-button {
	float: left;	
	}

/* collapsing borders */
.center .ux-button-NW,
.center .ux-button-W, 
.center .ux-button-SW,
.right .ux-button-NW,
.right .ux-button-W,
.right .ux-button-SW {
	width: 0;
	}
.left .ux-button-NE,
.left .ux-button-SE,
.center .ux-button-NE,
.center .ux-button-SE {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	}
.left .ux-button,
.center .ux-button {
	margin-right: 0;
	}
.center .ux-button,	
.right .ux-button {
	margin-left: 0;
	}

</style>

<script type="text/javascript">
jQuery(function($){
	$('#weekday div').button("radio",{
		name: "weekday"
		}).eq(3).ux(".checked",true);
	$('#truefalse div').button("radio",{
		name: "truefalse"
		});
	$('#yesno div').button("radio",{
		name: "yesno"
		});
	$('#boxer div').button("radio",{
		name: "boxer"
		});
	$('#music div').button("radio",{
		name: "music"
		});
	});
</script>

<h2>ux.button / radio</h2>

<p>type = "radio"</p>

<div id="weekday">
	<div class="left">Mon</div>
	<div class="center">Tue</div>
	<div class="center">Wed</div>
	<div class="center">Thu</div>
	<div class="center">Fri</div>
	<div class="center">Sat</div>
	<div class="right">Sun</div>
	</div>

<br clear="left" />&nbsp;

<div id="truefalse">
	<div class="left">True</div>
	<div class="right">False</div>
	</div>

<br clear="left" />&nbsp;

<div id="yesno">
	<div class="left">Yes</div>
	<div class="center">Maybe</div>
	<div class="right">No</div>
	</div>
	
<br clear="left" />&nbsp;

<div id="boxer">
	<div class="left">Boxers</div>
	<div class="right">Briefs</div>
	</div>	

<br clear="left" />&nbsp;

<div id="music">
	<div class="left">Beatles</div>
	<div class="right">Elvis</div>
	</div>	

</body></html>